<!-- 靠顶地图工具栏 -->
<template>
  <div id="menu-tool-top">
    <div class="button-group-panel-row">
        <Button  v-for="(item,index) in geoms" :key="index" v-if="status==2"
                 type="primary"
                 :Title="item.title"
                 :icon="item.icon"
                 :style="{marginTop:'2px',marginLeft: '5px'}"
                 :disabled="item.disabled"
                 @click="geomsButtonClick(item.name)"
        >{{item.title}}</Button>
      <Button type="info"
              v-if="status==1"
              :Title="newBtn.title"
              :icon="newBtn.icon"
              :style="{marginTop:'2px',marginLeft: '10px'}"
              :disabled="newBtn.disabled"
              @click="newButtonClick()"
      >{{newBtn.title}}</Button>
      <Button type="error"
              v-if="status==4"
              :Title="removeBtn.title"
              :icon="removeBtn.icon"
              :style="{marginTop:'2px',marginLeft: '5px'}"
              :disabled="removeBtn.disabled"
              @click="removeButtonClick()"
      >{{removeBtn.title}}</Button>
      <Button type="info"
              v-if="status==4"
              :Title="editBtn.title"
              :icon="editBtn.icon"
              :style="{marginTop:'2px',marginLeft: '5px'}"
              :disabled="editBtn.disabled"
              @click="editButtonClick()"
      >{{editBtn.title}}</Button>
      <Button type="success" v-if="status==3 || status==5"
              :Title="saveBtn.title"
              :icon="saveBtn.icon"
              :style="{marginTop:'2px',marginLeft: '5px'}"
              :disabled="saveBtn.disabled"
              @click="saveButtonClick()"
      >{{saveBtn.title}}</Button>
      <Button type="warning" v-if="status==3 || status==5"
              :Title="cancelBtn.title"
              :icon="cancelBtn.icon"
              :style="{marginTop:'2px',marginLeft: '5px'}"
              :disabled="cancelBtn.disabled"
              @click="cancelButtonClick()"
      >{{cancelBtn.title}}</Button>

    </div>

  </div>
</template>
<script>
export default {
  name: "PaintTools",
  props: {
    status: {type: Number, default: 0},//0初始状态，1可新增，2/新增准备画图，3/新增画图结束/修改，4点击围栏（可修改），5 修改可保存
    canEdit: {type: Boolean,default: true}
  },
  computed:{
    geoms(){
      return [
        {name:"Circle",title:this.$t('circle'),icon:"ios-radio-button-off",disabled:false,type:"primary"},
        {name:"Box",title:this.$t('rectangle'),icon:"ios-tablet-landscape",disabled:false,type:"primary"},
        {name:"Square",title:this.$t('square'),icon:"ios-square-outline",disabled:false,type:"primary"},
        {name:"Star",title:this.$t('stellate'),icon:"md-star-outline",disabled:false,type:"primary"},
        {name:"Polygon",title:this.$t('polygon'),icon:"logo-nodejs",disabled:false,type:"primary"}
      ]
    },
    newBtn(){return {name:"new",title:this.$t('add'),icon:"md-add",disabled:false,type:"info"}},
    editBtn(){return {name:"edit",title:this.$t('edit'),icon:"md-create",disabled:false,type:"info"}},
    removeBtn(){return {name:"remove",title:this.$t('delete'),icon:"md-trash",disabled:false,type:"error"}},
    saveBtn(){return {name:"save",title:this.$t('save'),icon:"md-checkmark",disabled:false,type:"success"}},
    cancelBtn(){return {name:"cancel",title:this.$t('cancel'),icon:"md-close",disabled:false,type:"warning"}},
  },
  watch: {
    status(value1, value2) {},
    canEdit(newValue){
      console.log("MenuToolsTop.canEdit newValue=%o",newValue)
      this.newBtn.disabled=!newValue;
      this.editBtn.disabled=!newValue;
      this.removeBtn.disabled=!newValue;
      this.saveBtn.disabled=!newValue;
      this.cancelBtn.disabled=!newValue;
    }

  },
  data(){
    return{
      action:"none",
    }
  },
  methods:{
    /**
     * 取消
     */
    cancelButtonClick(){
      //console.log(">>>>>>>> MenuToolTop.cancelButtonClick() status=%o",this.status);
      this.$emit('cancel-button-click',this.status);
    },

    /**
     * 编辑
     */
    editButtonClick(){
      //console.log(">>>>>>>> MenuToolTop.editButtonClick() status=%o",this.status);
      this.$emit('edit-button-click',this.status);
    },

    /**
     * 国类型选择
     * @param menuName
     */
    geomsButtonClick(menuName){
      this.$emit('geoms-button-click', menuName,this.status);
    },

    /**
     * 新围栏
     */
    newButtonClick(){
      //console.log(">>>>>>>> MenuToolTop.newButtonClick() status=%o",this.status);
      this.$emit('new-button-click',this.status);
    },

    /**
     * 删除
     */
    removeButtonClick(){
      this.$emit('remove-button-click',this.status);
    },

    /**
     * 保存
     */
    saveButtonClick(){
      //console.log(">>>>>>>> MenuToolTop.saveButtonClick() status=%o",this.status);
      this.$emit('save-button-click',this.status);
    },

    statusChange(){
      //0初始状态，1可新增，2/新增准备画图，3/新增画图结束/修改，4点击围栏（可修改），5 修改可保存
      if (this.status == 0){ //初始状态，全灰
        this.geoms.forEach((item) => {
          item.disabled = true;
        })
        this.newBtn.disabled=true;
        this.editBtn.disabled=true;
        this.removeBtn.disabled=true;
        this.saveBtn.disabled=true;
        this.cancelBtn.disabled = true;
      }else if (this.status == 1) { //等竺选择画线，不能保存，能取消
        this.geoms.forEach((item) => {
          item.disabled = false;
        })
        this.newBtn.disabled=false;
        this.editBtn.disabled=true;
        this.removeBtn.disabled=true;
        this.saveBtn.disabled=true;
        this.cancelBtn.disabled = false;
      }else if (this.status == 2) { //新增准备画图
        this.geoms.forEach((item) => {
          item.disabled = true;
        })
        this.newBtn.disabled=true;
        this.editBtn.disabled=true;
        this.removeBtn.disabled=true;
        this.saveBtn.disabled=false;
        this.cancelBtn.disabled = false;
      }else if (this.status == 3) { //点击围栏
        this.geoms.forEach((item) => {
          item.disabled = true;
        })
        this.editBtn.disabled=false;
        this.removeBtn.disabled=false;
        this.saveBtn.disabled=true;
        this.cancelBtn.disabled = true;
      }else if (this.status == 4) { //修改
        this.geoms.forEach((item) => {
          item.disabled = true;
        })
        this.editBtn.disabled=true;
        this.removeBtn.disabled=true;
        this.saveBtn.disabled=false;
        this.cancelBtn.disabled = false;
      }
    }
  },
  mounted() {
    //this.statusChange();
  }
}

</script>
<style lang="less">
#menu-tool-top{
  width:100%;
  height:100%;
}
.button-group-panel-row {
  width:100%;
  height: 35px;
  ///background: #fcfdff;
  background: rgba(255,255,255,0);
  //float: right;
  -webkit-transition: width .3s;
  transition: width .3s;
  //border: 1px solid #14edc5;
  border-top-left-radius: 7px;
  display: flex;
  flex-direction: row;
}
</style>
